<template>
  <div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">题库管理</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button style="outline: none;" @click="isAddBank = true; changeBankKey = true" type="text">新增题库</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="queryParam"
      class="demo-form-inline"
    >
      <el-form-item label="题库名称">
        <el-input
          v-model="queryParam.bankName"
          placeholder="题库名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="题库类型">
        <el-select
          v-model="queryParam.bankType"
          placeholder="题库类型"
        >
          <el-option v-for="(bankType, index) in bankTypes" :key="index" :label="bankType.codeName" :value="bankType.codeValue" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="searchBanks"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="banks"
      height="590"
    >
      <el-table-column
        prop="bankId"
        label="题库编号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="bankName"
        label="题库名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="bankType"
        label="题库类型"
        width="170"
      >
      <template slot-scope="scope">
          {{ parseBankType(scope.row.bankType) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="bankProblems"
        label="试题数"
        width="170"
      >
      </el-table-column>
      <el-table-column
        prop="bankDesc"
        label="题目描述"
        width="100"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="140"
      >
        <template slot-scope="scope">
          <el-button
            @click="showInfo(scope.row)"
            type="text"
            size="small"
          >详情</el-button>
          <el-button
            @click="editHandle(scope.row)"
            type="text"
            size="small"
          >修改</el-button>
          <el-button
            @click="deleteHandle(scope.row)"
            type="text"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pageData.total"
    >
    </el-pagination>
    <!-- 新增题库 -->
    <el-drawer
      :title="isAddBank ? '新增题库' : '修改题库'"
      :visible.sync="changeBankKey"
      >
      <el-form ref="newBank" :model="newBank" label-width="80px">
        <el-form-item v-if="!isAddBank" label="题库编号">
          <el-input v-model="newBank.bankId"></el-input>
        </el-form-item>
        <el-form-item label="题库名称">
          <el-input v-model="newBank.bankName"></el-input>
        </el-form-item>
        <el-form-item label="题库描述">
          <el-input v-model="newBank.bankDesc"></el-input>
        </el-form-item>
        <el-form-item label="题库类型">
          <el-select v-model="newBank.bankType" placeholder="题库类型">
            <el-option v-for="(bankType, index) in bankTypes" :key="index" :label="bankType.codeName" :value="bankType.codeValue" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changeBankHandle">确定</el-button>
          <el-button @click="changeBankKey = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- problem detail -->
    <!-- <el-dialog
      title="题库详情"
      :visible.sync="showBankInfoKey"
      width="70%">
      <problem-detail :currentBankId="currentBankId"></problem-detail>
    </el-dialog> -->
  </div>
</template>

<script>
import {queryBanks, getConfig, parseConfig, saveBank, deleteBank, editBank} from '@/api/system/system.js'
export default {
  components: {
  },
  data() {
    return {
      changeBankKey: false,
      showBankInfoKey: false,
      currentBankId: '',
      newBank: {
        bankId: '',
        bankName: '',
        bankType: '',
        bankDesc: '',
        bankProblems: 0
      },
      isShowInfo: false,
      banks: [],
      queryParam: {
        bankName: '',
        bankType: ''
      },
      isAddBank: true,
      bankTypes: [],
      pageData: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  async mounted() {
    const {data: resTypes} = await getConfig({codeType: 'BANK_TYPE', codeValue: ''})
    if (resTypes.code === 200) {
      this.bankTypes = resTypes.data.cache
    }
    this.searchBanks()
  },
  computed: {
    parseBankType() {
      return function(type) {
        return parseConfig(this.bankTypes, String(type))
      }
    }
  },
  methods: {
    async searchBanks() {
      const {data: res} = await queryBanks(this.queryParam)
      if (res.code === 200) {
        this.banks = res.data.banks.records
        this.pageData.total = res.data.banks.total
      }
    },
    async changeBankHandle() {
      if (this.isAddBank) {
        await saveBank(this.newBank)
        this.$message.success('保存成功')
      } else {
        await editBank(this.newBank)
        this.$message.success('修改成功')
      }
      this.changeBankKey = false
      this.searchBanks()
    },
    editHandle(row) {
      this.newBank = {...row}
      this.isAddBank = false
      this.changeBankKey = true
    },
    async deleteBank(row) {
      await deleteBank(row.bankId)
      this.$message.success('删除成功')
    },
    async showInfo(row) {
      this.$store.dispatch('current_bank', row)
      this.$router.push('/problemDetail')
    }
  },
};
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>